<script setup lang="ts">
const swiper = useSwiper();
</script>

<template>
  <div class="swiper-nav">
    <div @click="swiper.slidePrev()">
      <img style="transform: rotate(180deg)" class="black" src="~/assets/icons/more_right_black.png" alt=""/>
      <img style="transform: rotate(180deg)" class="white" src="~/assets/icons/more_right_white.png" alt=""/>
    </div>
    <slot></slot>
    <div @click="swiper.slideNext()">
      <img class="black" src="~/assets/icons/more_right_black.png" alt=""/>
      <img class="white" src="~/assets/icons/more_right_white.png" alt=""/>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.swiper-nav {
  width: 3.21rem;
  display: flex;
  justify-content: space-between;
  margin: 0.55rem auto 0 auto;

  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.67rem;
    height: 0.67rem;
    background: #ffffff;
    opacity: 1;
    border: 0.01rem solid #e9e9e9;
    border-radius: 100%;
    cursor: pointer;

    &:hover {
      box-shadow: 0 0.05rem 0.19rem 0.01rem rgba(0, 0, 0, 0.08);
    }

    img {
      user-select: none;
      width: 0.08rem;
      height: 0.15rem;
    }

    .white {
      display: none;
    }

    &:hover {
      background: linear-gradient(132deg, #2E6AFF 0%, #47FFDA 100%);

      .black {
        display: none;
      }

      .white {
        display: inline-block;
      }
    }

  }
}
</style>
